<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tab选项卡双向切换效果</title>
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <style>
        ul{
            /* border: 1px solid red; */
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .container{
            width: 600px;
            height: 300px;
            /* border: 2px solid red; */
            margin: 50px auto;
        }
        .tablist{
            display: flex;
        }
        .tablist li{
            height: 20px;
            background-color: ddd;
            margin-right: 5px;
            padding: 10px;
        }
        .tablist li.active{
            background-color: skyblue;
            color: #fff;
        }
        .swiper {
            width: 600px;
            height: 200px;
            border: 2px solid red;
        }  
        .swiper .swiper-slide:nth-child(2n){
            background-color: khaki;
        }
        .swiper .swiper-slide:nth-child(2n+1){
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- tab按钮 -->
        <ul class="tablist">
            <li class="active">选项一</li>
            <li>选项二</li>
            <li>选项三</li>
            <li>选项四</li>
            <li>选项五</li>
        </ul>
        <!-- tab内容区域 -->
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">Slide 1</div>
                <div class="swiper-slide">Slide 2</div>
                <div class="swiper-slide">Slide 3</div>
                <div class="swiper-slide">Slide 4</div>
                <div class="swiper-slide">Slide 5</div>
            </div>
        </div>
    </div>
    <script src="./js/swiper-bundle.min.js"></script>
    <script>        
        var mySwiper = new Swiper ('.swiper', {
            direction: 'horizontal', // 垂直切换选项
            // 所有事件在on中注册
             on: {
                    slideChangeTransitionEnd: function(){
                        // 结束后要做什么
                        // 遍历所有的li，将每个li身上的class="active"移除
                        for(let j=0; j<list.length;j++){
                            list[j].classList.remove("active")
                        }
                        // 把当前激活项索引对应的选项按钮点亮
                        list[mySwiper.activeIndex].classList.add("active")
                        
                    }
                },
        }) 
        // 点击选项按钮，轮播到对应的slide
        // 获取所有的li
        const list = document.querySelectorAll('.tablist li')
        // console.log(list);
        for(let i=0; i<list.length;i++){
            list[i].onclick = function(){
                // 点击后要做的事情
                // 遍历所有的li，将每个li身上的class="active"移除
                for(let j=0; j<list.length;j++){
                    list[j].classList.remove("active")
                }
                // 给当前点击的li添加class="active"
                this.classList.add('active')
                // 切换到对应的slide
                mySwiper.slideTo(i, 1000, false);//切换到第一个slide，速度为1秒
            }
        }   
    </script>
</body>
</html>